<template>
  <div class="rec_page">
    <div class="tab_item_box" v-if="isReg">
      <div class="reg_item">
        <div style="font-size: 2rem; color: #014D7E;  text-align: center;font-weight: bold">
          <p v-bind:interval="1000" style="font-size: 38px;">{{ currentDate }}</p>
        </div>
        <div style="font-size: 2rem; color: #014D7E;  text-align: center;font-weight: bold;line-height: 2.5rem;">
          <span v-bind:interval="1000" style="font-size: 38px;">{{ currentM }}<span v-bind:interval="1000"
                                                                                    style="font-size: 38px;color: #FF4C4C">{{
              currentS
            }}</span></span>
        </div>
        <div style="font-size: 2.5rem; color: #014D7E;  text-align: center;font-weight: bold;line-height: 5rem;">
          {{ patientName }}
        </div>
        <div style="font-size: 2.5rem; color: #FF4C4C;  text-align: center;font-weight: bold;line-height: 5.0rem;">
          预约患者优先
        </div>
        <div style="font-size: 1.475rem;  text-align: center;color: #014D7E;font-weight: bold;line-height: 3.0rem;">
          如您自驾来院就诊<br/>
          请主动向车场工作人员出示
        </div>
        <div style="text-align: center">
          <img src="@/assets/img/logo2022.png" width="250px" alt=""/>
        </div>
      </div>
    </div>
    <div class="tab_item_box" v-else>
      <div class="reg_item" style="color:#014D7E; text-align: center;font-weight: bold;font-size: 3rem">
        <br/>
        <br/>
        <br/>
        <br/>
        无预约信息
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
      </div>
    </div>
  </div>
</template>
<script>
import {todayIsReg} from "@/api/api";

export default {
  components: {},
  data() {
    return {
      currentDate: "",
      currentM: "",
      currentS: "",
      patientName: "",
      isReg: false
    };
  },
  created() {
    this.todayIsReg();
  },
  mounted() {
    this.$nextTick(() => {
      setInterval(this.showTime, 1000);
    });
  },
  methods: {
    showTime() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      console.log('====', month);
      month = month < 10 ? `0${month}` : month;
      let day = date.getDate();
      day = day < 10 ? `0${day}` : day;
      let hour = date.getHours();
      hour = hour < 10 ? `0${hour}` : hour; // 用三目运算符调整数字显示格式
      let minute = date.getMinutes();
      minute = minute < 10 ? `0${minute}` : minute;
      let second = date.getSeconds();
      second = second < 10 ? `0${second}` : second;
      // 加载现在时间
      this.currentDate = `${year}年${month}月${day}日`;
      this.currentM = `${hour}:${minute}:`;
      this.currentS = `${second}`;
    },
    // 获取挂号记录列表
    todayIsReg() {
      var data = {
        startDate: "1970-01-01"
      };
      todayIsReg(data).then((res) => {
        if (res.code == 200) {
          this.isReg = true;
          this.patientName = res.data.name
        }
      });
    },
  }
};
</script>
<style scoped>
.rec_page {
  height: 100vh;
  overflow: hidden;
}

.tab_item_box {
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  /*height: calc(100% - 150px);*/
  padding: 1rem;
  overflow-y: scroll;
}

.reg_item {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.9375rem 0px rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  width: calc(100% - 1.875rem);
  padding: 1.0625rem 0.9375rem 0.8125rem 0.9375rem;
  color: #a4adbe;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.reg_item > div {
  /*line-height: 2rem;*/
}

.reg_item_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #e7ecf5;
  margin-bottom: 0.9375rem;
}

.reg_item_2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* margin-top: 0.9375rem; */
}

.reg_item_2 > div {
  width: 5.625rem;
  height: 1.875rem;

  border-radius: 0.1875rem;
  text-align: center;
  line-height: 1.875rem;
  font-size: 0.9375rem;
}

.reg_item_2 .btn1 {
  border: 0.0625rem solid rgba(164, 173, 190, 1);
  color: #a4adbe;
}

.reg_item_2 .btn2 {
  border: 0.0625rem solid rgba(68, 142, 255, 1);
  color: #448eff;
  margin-left: 0.75rem;
  text-align: center;
}


.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;

}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
